import { Directive, ElementRef, Input, HostListener, OnInit } from '@angular/core';

@Directive({ selector: '[zeditorRenderEl]' })
export class ZeditorRenderElDirective implements OnInit {

  main;
  imgs;
  ps;
  imgBoxSpan;

  constructor(private el: ElementRef) { }

  // 检查图片是否加载完成
  checkImgLoadStatus() {
    this.imgs = this.main.querySelectorAll('img');
    for (let img of this.imgs) {
      if (!img['complete']) return false;
    }
    return true;
  }

  ngOnInit() {
    this.main = this.el.nativeElement;
    let getImgTimer = setInterval( () => {
      let imgLoadStatus =  this.checkImgLoadStatus();
      if(imgLoadStatus) {
        this.ps = this.main.querySelectorAll('p');

        clearInterval(getImgTimer);

        let boxW = this.main.offsetWidth;
        for(let img of this.imgs) {
          let imgW = img.offsetWidth;
          if(imgW > boxW) img.style.width = '100%';
        }
        for(let i=1; i<this.ps.length; i++) {
          this.ps[i].style.marginTop = '5px';
        }
      }
    }, 100);
  }
}